<template>
  <el-row class="tac"
    :style="{ width:!isCollapse ? '190px' : '64px' }"
  >
    <el-col :span="12">
      <h5 class="mb-2">{{ isCollapse ? 'DiDi' : '滴滴陪诊' }}</h5>
      <el-menu default-active="2" 
        class="el-menu-vertical-demo" 
        :collapse="isCollapse" 
        @open="handleOpen"
        @close="handleClose"
        
        >
        <TreeMenu :menuData="menuData" :index="1" />
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import TreeMenu from '@/components/TreeMenu.vue'
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore} from 'vuex'

const router = useRouter()
// console.log(router, 'router')

// 获取实例 必须用computed(()=> store.state.menu加需要的函数) 官网组合式API有
const store = useStore()

// const menuData = reactive(router.options.routes[0].children) // 文件层级
const menuData = computed(()=> store.state.menu.routerList)

const isCollapse = computed(()=> store.state.menu.isCollapse)


const handleOpen = () => {}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="less">

/*
  // display: flex;
  // flex-direction: column;
  // width: 200px;
  // height: 100%;



  // text-align: center;
  // padding: 10px;



  // flex: 1;

  // height: 10vh;


 
    // height: 100vh;
*/
.cat {
  height: 100vh; 
  
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
}
.el-menu--collapse {
    // min-width: 200px;
    height: 100vh;
  }

.mb-2{
  text-align: center;
  font-size: 16px;
  margin: 18px 0 10px 14px;
}
</style>